<template>
 <el-button @click="router.push('/site/meeting/Create')" v-if="$filters.auth($filters.PrivilegeType.Add)" class="button-header"  type="primary" :icon="Plus">添加会场</el-button>
 <el-form inline :model="query" class="filter" label-width="100px"> 
    <el-form-item label="场地名称：">
      <el-col :span="22">
        <el-input v-model="query.name" placeholder="请输入场地名称" />
      </el-col>
    </el-form-item>
    <el-form-item label="分类：">
      <el-col :span="22">
        <category v-model="query.categoryId" />
      </el-col>
    </el-form-item>
    <el-form-item label="品牌：">
      <el-col :span="22">
        <brand v-model="query.brandId" />
      </el-col>
    </el-form-item>
    <el-form-item label="特色：">
      <el-col :span="22">
        <features :type="PositionType.Site" v-model="query.featuresId" />
      </el-col>
    </el-form-item>
    <el-form-item label="特色：">
      <el-col :span="22">
        <region  v-model="query.regionId" />
      </el-col>
    </el-form-item>
    <el-form-item label="面积：">
        <el-input-number v-model="query.minArea" :min="0" controls-position="right" />
        <span class="ml-10 mr-10"> - </span>
        <el-input-number v-model="query.maxArea" :min="0" controls-position="right" />
    </el-form-item>
    <el-form-item label="容纳人数 ：">
        <el-input-number v-model="query.minPeople" :min="0" controls-position="right" />
        <span class="ml-10 mr-10"> - </span>
        <el-input-number v-model="query.maxPeople" :min="0" controls-position="right" />
    </el-form-item>
    <el-form-item label="会议室价格 ：">
        <el-input-number v-model="query.minMeetingRoomPrice" :min="0" controls-position="right" />
        <span class="ml-10 mr-10"> - </span>
        <el-input-number v-model="query.maxMeetingRoomPrice" :min="0" controls-position="right" />
    </el-form-item>
    <el-form-item class="filter-actions">
      <el-button class="button-small" type="primary" @click="handleSearch">筛选</el-button>
      <el-button type="text" class="button-reset" @click="handleClear">重置筛选条件</el-button>
    </el-form-item>
 </el-form>
 <grid url="meeting/list" :params="query" orderbyName='Sequence' ref="datalist">
      <el-table-column prop="name" label="会场名称" />
      <el-table-column prop="categoryName" label="类型" />
      <el-table-column prop="regionName" label="地址" />
      <el-table-column prop="minMeetingRoomPrice" label="参考价" sortable />
      <el-table-column prop="maxArea" label="面积" sortable>
      <template #default="scope">
        {{ scope.row.minArea }} - {{ scope.row.maxArea }}
      </template>
      </el-table-column>
      <el-table-column prop="maxPeople" label="人数" sortable>
      <template #default="scope">
        {{ scope.row.minPeople }} - {{ scope.row.maxPeople }}
      </template>
      </el-table-column>
      <el-table-column prop="meetingRoomCount" label="会议室数量" sortable />
      <el-table-column prop="createTime" label="创建时间" sortable width="160" />
      <el-table-column label="排序" sortable prop="sequence">
        <template #default="scope">
          <el-input-number v-model="scope.row.sequence" controls-position="right" @change="handleChangeSequence(scope.row)" :min="0" :max="99999999" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="right" width="300">
        <template #default="scope">
          <el-button type="text" v-if="$filters.auth($filters.PrivilegeType.Edit)"  @click="router.push(`/site/meeting/edit?id=${scope.row.id}`)">编辑</el-button>
          <el-button type="text" v-if="$filters.auth($filters.PrivilegeType.Edit)" @click="handleMeeting(scope.row.id)"  >会议室</el-button>
          <el-button type="text" v-if="$filters.auth($filters.PrivilegeType.Edit)" @click="handleGuest(scope.row.id)"  >客房</el-button>
          <el-button type="text" v-if="$filters.auth($filters.PrivilegeType.Edit)" @click="handleDining(scope.row.id)"  >酒店</el-button>
          <el-popconfirm :width="300" v-if="$filters.auth($filters.PrivilegeType.Delete)" class="btn-popconfirm" @confirm="handleDelete(scope.row.id)" confirmButtonText="确认" cancelButtonText="取消" title="确定要删除该员工吗？">
          <template #reference>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-popconfirm>
        </template>
      </el-table-column>
    </grid>
 <meeting v-model:visible="meetingDialog.visible" :venue-id="meetingDialog.id" @on-confirm="meetingconfirm" />
 <Guest v-model:visible="guestDialog.visible" :venue-id="guestDialog.id" @on-confirm="guestconfirm" />
 <dining v-model:visible="diningDialog.visible" :venue-id="diningDialog.id" @on-confirm="diningconfirm" />
 
</template>
<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import Category from  '@/components/Category.vue'
import Brand from  '@/components/Brand.vue'
import Features from '@/components/Features.vue'
import Region from  '@/components/Region.vue'
import Grid from '@/components/Grid.vue'
import { useRouter } from 'vue-router'
import { PositionType } from '@/utils/enum'
import { SiteDelete } from '@/api/site'
import { ElMessage } from 'element-plus'
import Meeting from './components/Meeting.vue'
import Guest from './components/Guest.vue'
import Dining from './components/Dining.vue'
import { UpdateSequence } from '@/api/site'
const router = useRouter()
const query = ref<VenueQuery>({
  name: '',
  categoryId: undefined,
  regionId : undefined,
  featuresId: undefined,
  brandId:undefined,
  minArea:undefined,
  maxArea:undefined,
  minPeople:undefined,
  maxPeople:undefined,
  minMeetingRoomPrice:undefined,
  maxMeetingRoomPrice:undefined,
})
/**
 * 会议室弹窗
 */
const meetingDialog = reactive({
  visible: false,
  id: 0
})
/**
 * 客房弹窗
 */
const guestDialog = reactive({
  visible: false,
  id: 0
})
const diningDialog = reactive({
  visible: false,
  id: 0
})
const datalist = ref<InstanceType<typeof Grid>>()

const handleSearch = ():void => {
  datalist.value?.loadData()
}
const handleClear = ():void => {
  query.value.name = ''
  query.value.categoryId = undefined
  query.value.regionId = undefined
  query.value.featuresId = undefined
  query.value.brandId = undefined
  query.value.minArea = undefined
  query.value.maxArea = undefined
  query.value.minPeople = undefined
  query.value.maxPeople = undefined
  query.value.minMeetingRoomPrice = undefined
  query.value.maxMeetingRoomPrice = undefined
  datalist.value?.loadData()
}
const handleDelete = (id:number):void => {
  SiteDelete(id).then(((res:ServiceResponse<any>) => {
    if(res.success) {
          ElMessage.success('删除成功')
          datalist.value?.loadData()
        } else  ElMessage.error(res.msg)
  }))
}
/**
 * 点击会议室
 * @param id 
 */
const handleMeeting = (id:number):void => {
  meetingDialog.visible = true
  meetingDialog.id = id
}
/**
 * 点击客房
 * @param id 
 */
const handleGuest = (id:number):void => {
  guestDialog.visible = true
  guestDialog.id = id
}
/**
 * 点击酒店
 * @param id 
 */
const handleDining = (id:number):void => {
  diningDialog.visible = true
  diningDialog.id = id
}

const meetingconfirm = ():void => {
  datalist.value?.loadData()
}
const guestconfirm = ():void => {
  datalist.value?.loadData()
}
const diningconfirm = ():void => {
  datalist.value?.loadData()
}
/**
 * 修改排序
 * @param row 
 */
  const handleChangeSequence = (row:Brand):void => {
    UpdateSequence(row.id,row.sequence).then((res:ServiceResponse<any>) => {
      if(res.success) {
            ElMessage.success('保存成功')
            datalist.value?.loadData()
          } else  ElMessage.error(res.msg)
  })
}

</script>
<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/tablePage.scss";
.ml-10 {
  margin-left: 10px;
}
.mr-10 {
  margin-right: 10px;
}
</style>